<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>机台货品</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../css/1px.css" />
    <link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
    <style type="text/css">
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        background-color: #fff !important;
      }
      
      #app {
        font-size: 14px;
        box-sizing: border-box;
      }
      /**/
			
			.division {
				display: flex;
				margin: 15px 0 5px;
			}
			
			.line {
				flex: 2;
				text-align: center;
			}
			
			.line span {
				display: inline-block;
				width: 70%;
				height: 1px;
				background-color: #ccc;
				vertical-align: middle;
			}
			
			.division-word {
				flex: 1;
				text-align: center;
				font-size: 12px;
			}
			/**/
      .empty {
        text-align: center;
        margin-top: 50px;
        color: #999;
        font-size: 12px;
      }
      .matchine-total-name{
      	font-weight: bold;
      	font-size: 20px;
      }
      .machine-section {
        padding: 25px 0;
        color: #000;
        text-align: center;
      }
       .machine-section p{
       	color: #FFFFFF;
       }
       .goods-item{
       	position: relative;
       }
      .goods-item div {
        align-items: center;
      }
      
      .goods-item__top {
        padding-top: 10px;
      }
      
      .img-wrapper {
        flex: 0 1 90px;
        text-align: center;
        position: relative;
      }
      
      .goods-info {
        overflow: hidden;
      }
      
      .goods-info div {
        margin: 3px 0;
      }
      .goods-id{
      	position: absolute;
      	width: 100%;
      	text-align: center;
      	font-size: 13px;
      	left: 0;
      	bottom: 0;
      }
      .goods-id .id{
      	display: inline-block;
      	background-color: rgba(52, 52, 52, .5);
      	color: #FFFFFF;
      	width: 70px;
      	margin: auto auto;
      }
      .goods-info-right {
        flex: 0 1 40px;
        text-align: center;
        overflow: hidden;
      }
      
      .goods-info-right div {
        margin: 3px 0;
      }
      
      .goods-item__bottom {
        padding-bottom: 5px;
      }
      
      .goods-item_total {
        padding-left: 10px;
      }
      
      .goods-item_op {
        flex: 0 1 120px;
        text-align: center;
        position: absolute;
        right: 5px;
       	bottom: 4px;
      }
      
      .goods-item_op button {
        width: 70%;
      }
      .add-btn{
      	background-color: #FF9800;
      	border-color: #FF9800
      }
      .divide {
        padding: 6px;
        text-align: center;
      }
      
      .fix-bar {
        position: fixed;
        height: 38px;
        line-height: 38px;
        width: 100%;
        text-align: center;
        bottom: 0px;
        background-color: #fff;
        z-index: 10;
      }
      .bgGray{
      	background-color: #F8F8F8;
      }
      /**/
     .back-btn {
				background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			
			.next-btn {
				background-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
     /**/
      .mask {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        font-size: 18px;
        color: #999;
        text-align: center;
        padding-top: 50px;
      }
      
      .mui-scroll-wrapper {
        padding-bottom: 40px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <div class="machine" id="app">

      <div class="mask" v-show="isInit">加载中...</div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="machine-section" style="background-color:#8BC34A;color: #fff;">
            <p class="matchine-total-name"><span v-text="machine.deviceFullName"></span>-<span v-text="machine.storeNumber"></span><span>号机</span></p>
            <p><span>SN:</span><span v-text="machine.masterSn"></span></p>
            <!--<p><span>最后抄表时间:</span><span></span></p>-->
          </div>
			<div class="division flex">
				<div class="line"><span></span></div>
				<div class="division-word">
					已上架礼品
				</div>
				<div class="line"><span></span></div>
			</div>
          <div class="goods-item" v-for="(item, index) in machine.goods" :key="index" :class="{'bgGray':index%2===0}">
            <div class="weui-flex">
              <div class="weui-flex__item weui-flex" class="goods-item__top" style="padding-top: 10px;">
                <div class="weui-flex__item img-wrapper">
                  <img :src="item.wareGoods.cutImg | fixUrl" style="width: 70px; height:70px;" alt="" />
                  <p class="goods-id"><span class="id" v-text="item.wareGoods.wareGoodsId"></span></p>
                </div>
                <div class="weui-flex__item goods-info">
                  <div>名称:<span v-text="item.wareGoods.name"></span></div>
                   <div>门店库存:<span v-text="item.shopGoodsAmount.amount"></span></div>
                   <div>机台库存:<span v-text="item.deviceAmount"></span></div>
                </div>
              </div>
              <div class="weui-flex__item goods-info-right"></div>
            </div>
              <div class="goods-item_op">
                <button type="button" class="mui-btn" style="width:50px;background-color: #737373;color:#fff;" @click="remove(item, index)">下架</button>
                <button type="button" class="mui-btn mui-btn-primary add-btn" style="width:50px;" @click="addAmount(item, index)">追加</button>
              </div>
          </div>
        </div>
        <div class="fix-bar weui-flex vux-1px-t">
          <div class="weui-flex__item" >
          	<div class="mui-btn back-btn" @click="tojournal">变更日志</div>
          </div>
          <div class="weui-flex__item">
          <div class="mui-btn next-btn" @click="chooseGoods">上架新货</div></div>
        </div>
      </div>

    </div>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../config.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init();
      mui.plusReady(function() {
        var vm = new Vue({
          el: '#app',
          data: {
            machine: {},
            currentShopObj: {},
            index: '',
            isInit: true,
            isAjax: false
          },
          mounted: function() {
            this.fixScroll();
            this.receiveParams();
            this.addListener();
          },
          methods: {
            receiveParams: function() {
              var self = plus.webview.currentWebview();
              this.currentShopObj = self.currentShopObj;
              this.machine = self.reward;
              this.index = self.index;
              mui('.mui-scroll-wrapper').scroll().reLayout();
              setTimeout(function() {
                vm.isInit = false;
              }, 200);
            },
            fixScroll: function() {
              mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005,
                brounce: true,
                scrollY: true,
                indicators: false
              });
            },
            addListener: function() {
              window.addEventListener('fresh', function(e) {
                vm.machine = e.detail.reward;
              });
            },
            fresh: function() {
              var machine = plus.webview.getWebviewById('machine');
              mui.fire(machine, 'fresh', {
                index: vm.index
              });
            },
            tojournal: function() {
            	var vm = this
            	mui.openWindow({
                id: 'racking-journal',
                url: 'racking-journal.html',
                styles: {
                  titleNView: {
                    titleText: vm.currentShopObj.storeName + '上架日志',
                    titleColor: "#FFFFFF",
                    titleSize: "17px",
                    backgroundColor: "#FF6800",
                    autoBackButton: true,
                    buttons: [{
                      fontWeight: 'normal',
                      fontSize: '18px',
                      float: 'right',
                      fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                      text: "\ue602",
                      onclick: function() {
                        var allPage = plus.webview.all()
                        var nowPage = plus.webview.getWebviewById('index')
                        for(var i = 0; i < allPage.length; i++) {
                          if(allPage[i].getURL() !== nowPage.getURL()) {
                            plus.webview.close(allPage[i]);
                          }
                        }
                      }
                    }],
                    splitLine: {
                      color: "#CCCCCC",
                      height: "1px"
                    }
                  }
                },
                extras: {
                  currentShopObj: vm.currentShopObj,
                  deviceSn:vm.machine.masterSn,
                  deviceName:vm.machine.deviceFullName+'-'+ vm.machine.storeNumber
                }
              });
            },
            chooseGoods: function() {
              mui.openWindow({
                id: 'racking',
                url: 'racking.html',
                styles: {
                  titleNView: {
                    titleText: vm.currentShopObj.storeName + '货品上架',
                    titleColor: "#FFFFFF",
                    titleSize: "17px",
                    backgroundColor: "#FF6800",
                    autoBackButton: true,
                    buttons: [{
                      fontWeight: 'normal',
                      fontSize: '18px',
                      float: 'right',
                      fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                      text: "\ue602",
                      onclick: function() {
                        var allPage = plus.webview.all()
                        var nowPage = plus.webview.getWebviewById('index')
                        for(var i = 0; i < allPage.length; i++) {
                          if(allPage[i].getURL() !== nowPage.getURL()) {
                            plus.webview.close(allPage[i]);
                          }
                        }
                      }
                    }],
                    splitLine: {
                      color: "#CCCCCC",
                      height: "1px"
                    }
                  }
                },
                extras: {
                  currentShopObj: vm.currentShopObj,
                  reward: vm.machine,
                  index: vm.index
                }
              });
            },
            remove: function(item, index) {
              var btnArray = ['取消', '确定'];
              var totalNum = this.machine.goods[index].deviceAmount
               mui.prompt('请输入下架数量：','' ,'共有'+ totalNum +'个', btnArray, function(e) {
               	if(e.index === 1) {
               		if(e.value < totalNum) {
               			config.ajax({
                    url: '/shopGoods/addAmount4Device',
                    data: {
                      deviceGoodsId: item.deviceGoodsId,
                      amount: -e.value
                    },
                    success: function(res) {
                      if(res.result === 1) {
                        plus.nativeUI.toast('下架成功');
                        vm.fresh();
                        vm.machine.goods[index].shopGoodsAmount.amount += e.value;
                      } else {
                        plus.nativeUI.toast(res.errormsg);
                      }
                    }
                  });
               		} else if(e.value*1===totalNum*1) {
               			config.ajax({
                    url: '/shopGoods/unbindDevice',
                    data: {
                      deviceGoodsId: item.deviceGoodsId,
                      amount: item.deviceAmount
                    },
                    success: function(res) {
                      if(res.result === 1) {
                        plus.nativeUI.toast('操作成功');
                        vm.fresh();
                        vm.machine.goods.splice(index, 1);
                      } else {
                        plus.nativeUI.toast(res.errormsg);
                      }
                    }
                  });
               		} else {
               			mui.toast('超出机台货品数量！')
               		}
               	}
               },'div')
               document.querySelector('.mui-popup-input input').type = 'number';
//            mui.confirm('确定下架' + item.wareGoods.name + '吗', '提示', btnArray, function(e) {
//              if(e.index === 1) {
//                config.ajax({
//                  url: '/shopGoods/unbindDevice',
//                  data: {
//                    deviceGoodsId: item.deviceGoodsId,
//                    amount: item.deviceAmount
//                  },
//                  success: function(res) {
//                    if(res.result === 1) {
//                      plus.nativeUI.toast('操作成功');
//                      vm.fresh();
//                      vm.machine.goods.splice(index, 1);
//                    } else {
//                      plus.nativeUI.toast(res.errormsg);
//                    }
//                  }
//                });
//              }
//            });
            },
            addAmount: function(item, index) {
              var btnArray = ['取消', '确定'];
              mui.prompt('请输入追加数量：', '', '追加' + item.wareGoods.name, btnArray, function(e) {
                if(e.index == 1) {
                	if(vm.isAjax) {
                		return 
                	}
                	vm.isAjax = true
                  config.ajax({
                    url: '/shopGoods/addAmount4Device',
                    data: {
                      deviceGoodsId: item.deviceGoodsId,
                      amount: e.value
                    },
                    success: function(res) {
                      if(res.result === 1) {
                        plus.nativeUI.toast('追加成功');
                        vm.fresh();
                        vm.machine.goods[index].shopGoodsAmount.amount += e.value;
                        vm.isAjax = false
                      } else {
                        plus.nativeUI.toast(res.errormsg);
                        vm.isAjax = false
                      }
                    }
                  });
                }else {}
              }, 'div');
              document.querySelector('.mui-popup-input input').type = 'number';
            }
          },
          filters: {
            fixUrl: function(val) {
              if(val && val.indexOf('http://') === -1) {
                return config.imgPath + val;
              }
              return val;
            }
          }
        });
      });
    </script>
  </body>

</html>